<template>
  <div class="home-container">
    <div
      class="hearderbg"
      :style="{ backgroundImage: 'url(' + headerlist.avatar + ')' }"
    ></div>
    <div class="hearder">
      <div style="display:flex;">
        <img
          :src="headerlist.avatar"
          style="width:80px; height:80px; border:1px solid #eee; border-radius:20%; margin-left:10px; margin-top:10px;"
        />
        <div class="nav-right">
          <div style="display:flex; margin-top:10px; ">
            <p
              style="margin-top:5px; height:22px; width:35px; line-height:22px; text-align:center; color:#fff; font-size:12px; border-radius:20%; background-color:#31A003;"
            >
              品牌
            </p>
            <h3 class="nav-title">{{ headerlist.name }}</h3>
          </div>
          <div class="distribution">
            <span>{{ headerlist.description }}</span
            >/<span>{{ headerlist.deliveryTime }}分钟送达</span>
          </div>
          <div style="margin-top:10px; display:flex;">
            <van-tag type="success" class="full-reduction">减</van-tag>
            <span class="discount">{{ offerinfo }}</span
            ><van-tag type="success" class="num" @click="mantleshow = true"
              >5个<van-icon name="arrow"
            /></van-tag>
          </div>
        </div>
      </div>
      <div class="notice-content">
        <van-tag type="success" class="notice-img">公告</van-tag>
        <van-notice-bar
          class="notice-text"
          scrollable
          :text="headerlist.bulletin"
        />
      </div>
    </div>
    <div class="home-main">
      <div class="home-nav">
        <van-tabs v-model="activeName" title-active-color="#E57C06">
          <van-tab title="商品" name="/home" to="/home/shop"></van-tab>
          <van-tab
            title="评价"
            name="/home/evaluate"
            to="/home/evaluate"
          ></van-tab>
          <van-tab
            title="商家"
            name="/home/business"
            to="/home/business"
          ></van-tab>
        </van-tabs>
      </div>
      <router-view></router-view>
    </div>

    <div>
      <van-goods-action>
        <van-goods-action-icon
          icon="smile-o"
          color="#ccc"
          text="联系商家"
          style="margin-right:5px; width:20%; border-radius:45% 0 0 45%; color:#ccc; background-color:#222222;"
        />
        <div
          style="width:60%; height:50px; color:#ccc; background-color:#222222; display:flex;" @click="show = true"
        >
          <van-badge style="text-align:center; ">
            <div class="child" :style="{backgroundColor:shopCartBg()}">
              <van-icon
                name="shopping-cart"
                size="25px"
                :badge="this.shopCartTotalnum>0?this.shopCartTotalnum:''"
                color="#222"
                style="line-height:35px;"
              />
            </div>
          </van-badge>
          <div style="margin-left:5px; margin-top:5px;">
            <strong></strong>￥{{totalPrice.toFixed(2)}}<br /><span
              style=" font-size:12px; color:#aaa;"
              >另需配送费4元/支持自取</span
            >
          </div>
        </div>
        <van-goods-action-icon
          color="#ccc"
          text="去结算"
          style="margin-right:5px; font-size:16px; width:20%; border-radius:0 45% 45% 0; color:#222; font-weight:600; background-color:#FFC300;"
        />
      </van-goods-action>
    </div>

    <van-action-sheet v-model="show" title="购物车">
      <div class="content">
        <div v-show="this.x_getGoodsList.length<1" style="position:absolute; left:40%; bottom:50%; transtion:transfrom(-50%,-50%); font-size:20px;">暂无商品</div>
        <div class="empty-shop-cart-content">
          <p class="empty-shop-cart" @click="clickEmpty">清空购物车</p>
          <div style="margin-top:15px">
          <div class="shop-cart-content" v-for="(item,index) in this.x_getGoodsList" :key="index">  
              <div style="width:50%;">{{item.name}}</div>
              <div>{{(item.num*item.price).toFixed(2)}}</div>
              <div>
                <button class="shopcart" @click="clickred(item.id)">
                  <van-icon name="minus" />
                </button>
                <label>{{item.num}}</label>
                <button class="shopcart" @click="clickadd(item.id)">
                  <van-icon name="plus" color="#ffc300"/>
                </button>
              </div>
          </div>
          </div>
        </div>
      </div>
    </van-action-sheet>

    <!-- 蒙层 -->
    <van-overlay :show="mantleshow" @click="mantleshow = false">
      <h2 class="mantle-title">{{ headerlist.name }}</h2>
      <div style="text-align:center">
        <van-rate
          v-model="headerlist.score"
          gutter="10px"
          allow-half
          :size="25"
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
        />
      </div>

      <div class="mantle-Discount-title">
        ——————&nbsp;&nbsp;优惠信息&nbsp;&nbsp; ——————
      </div>
      <div>
        <div style="margin-left:10%; margin-top:30px;">
          <p
            style="margin-bottom:20px;"
            v-for="(item, index) in headerlist.supports"
            :key="index"
          >
            <van-tag plain type="primary">减</van-tag>
            <span style="color:#fff; margin-left:10px;">{{ item }}</span>
          </p>
        </div>
      </div>
      <div class="mantle-Discount-title">——————商家公告——————</div>
      <div
        style="width:80%; margin-top:30px; margin-left:10%; color:#ccc; font-size:14px;"
      >
        {{ headerlist.bulletin }}
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { shopseller } from "@/apis/apis";

export default {
  components: {},
  data() {
    return {
      headerimg:
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3574744044,2960476938&fm=11&gp=0.jpg",
      activeName: "/",
      mantleshow: false,
      shopcarnum: "",

      headerlist: "",
      offerinfo: "",

      show: false,
      // shopCartColor:"#ffc300",
    };
  },
  methods: {
    //购物车增加数量功能
    clickadd(id){
      this.$store.commit("changeShopCartNum",{id:id,num:1})
    },
    //购物车减少数量功能
     clickred(id){
      this.$store.commit("changeShopCartNum",{id:id,num:-1})
    },
    //清空购物车
    clickEmpty(){
      this.$store.commit("emptyShopCart")
    },
    //购物车有东西背景为亮色，没东西则为暗色
    shopCartBg(){
      if(this.x_getGoodsList.length>0){
        return "#ffc300";
      }
      return "#666";
    }
  },
  created() {
    this.activeName = location.hash.slice(1);

    shopseller().then((res) => {
      // console.log(res.data);
      this.headerlist = res.data.data;
      this.offerinfo = res.data.data.supports.join(",");
    });
  },
  computed: {
    x_getGoodsList() {
      let arr=[]//用来装num数量大于0的商品数组
      for(let obj of this.$store.state.goodsList){
        for(let child of obj.foods){
          if(child.num>0){
            arr.push(child)
          }
        }
      }
      return arr;
    },
    
    //购物车总价
    totalPrice(){
      let total=0;
      for(let obj of this.x_getGoodsList){
         total+=obj.num*obj.price
      }
      return total
    },
    //购物车商品总数
    shopCartTotalnum(){
      let totalnum=0;
      for(let obj of this.x_getGoodsList){
         totalnum+=obj.num
      }
      return totalnum
    },

  },
};
</script>

<style lang="less" scoped>
html,
body {
  width: 100%;
  height: 100%;
}
* {
  padding: 0;
  margin: 0;
}
.home-container {
  width: 100%;
  height: 100%;
  .hearderbg {
    height: 150px;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    z-index: -3;
    filter: blur(3px);
  }
  .hearder {
    height: 150px;
    display: flex;
    flex-direction: column;
    .nav-right {
      margin-left: 20px;
    }
    .nav-title {
      margin-left: 10px;
      color: #fff;
      font-weight: 500;
      font-size: 24px;
    }
    .distribution {
      margin-top: 5px;
      color: #fff;
    }
    .full-reduction {
      height: 24px;
      width: 20px;
      font-size: 20px;
      color: crimson;
      background-color: cornsilk;
    }
    .discount {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      width: 150px;
      color: #fff;
      line-height: 30px;
      margin-left: 5px;
    }
    .num {
      width: 60px;
      height: 30px;
      padding-left: 15px;
      font-size: 16px;
      border-radius: 20%;
      background-color: rgba(0, 0, 0, 0.2);
      box-sizing: border-box;
    }
    .notice-content {
      height: 30px;
      margin-top: 10px;
      background-color: rgba(0, 0, 0, 0.2);
      display: flex;
    }
    .notice-img {
      margin-top: 2px;
      margin-left: 5px;
      padding: 3px;
      color: maroon;
      font-size: 16px;
      border-radius: 10%;
      background-color: #d6d0ba;
    }
    .notice-text {
      flex: 1;
      color: #fff;
      font-size: 18px;
      background-color: rgba(0, 0, 0, 0.2);
    }
  }
  .home-main {
    // flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
.van-goods-action {
  width: 100%;
  position: fixed;
  z-index: 99999;
  bottom: 10px;
}
.child {
  margin-left: 5px;
  margin-top: 5px;
  width: 40px;
  height: 40px;
  // background: #ffc300;
  border-radius: 50%;
}

//蒙层
.van-overlay {
  width: 100%;
}
.mantle-title {
  margin-top: 70px;
  text-align: center;
  color: #fff;
  font-weight: 600;
}
.van-rate {
  margin-top: 20px;
}
.mantle-Discount-title {
  margin-top: 30px;
  text-align: center;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
}

//购物车
.content {
  padding: 5px 10px 60px;
  height: 200px;
  display: flex;
  flex-direction: column;
  .empty-shop-cart-content {
    flex: 1;
    overflow: scroll;
  }
  .empty-shop-cart {
    text-align: right;
    margin-right: 20px;
  }
  .shop-cart-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 10px;
    .shopcart{
      margin-left:10px;
      margin-right:10px;
      outline: none;
      width:25px;
      height:25px;
      border-radius: 50%;
      border:1px solid #f60;
    }
  }
}
</style>
